import { defineComponent, ref } from "vue";
import ProForm from "../pro-form";
import type { ProColumnsType } from "../interface";
import Button from "ant-design-vue/es/button";
import { Input } from "ant-design-vue";

export default defineComponent({
  setup(props, ctx) {
    const open = ref(false);
    const currRecord = ref();
    const title = ref("新增");
    const add = () => {
      currRecord.value = null;
      title.value = "新增";
      open.value = true;
    };
    const edit = (record: typeof currRecord.value) => {
      currRecord.value = record;
      title.value = "修改";
      open.value = true;
    };

    const tablecolumns: ProColumnsType<{
      name: string;
      phone: string;
      avatar: string;
      createTime: number;
    }> = [
      {
        title: "姓名",
        dataIndex: "name",
        type: "input",
      },
      {
        title: "手机号ffffffggg",
        dataIndex: "phone",
        type: "input",
      },
      {
        title: "手机号ffffffg2gg",
        dataIndex: "phone2",
        type: "input",
      },
      {
        title: "手机号ffffffg2gg2",
        dataIndex: "phone22",
        type: "input",
      },
      {
        title: "手机号ffffffg2gg3",
        dataIndex: "phone24",
        type: "input",
      },
      {
        title: "性别",
        dataIndex: "sex",
        type: "select",
        options: [
          {
            label: "男sdfsdf",
            value: "1",
          },
          {
            label: "女sdfsf",
            value: "2",
          },
        ],
        hideInTable: true,
      },
      {
        title: "不显示在表单中",
        dataIndex: "createTime",
        hideInForm: true,
        customRender({ text, record, index, column }) {
          return new Date(text).toLocaleString();
        },
      },
      {
        title: "操作",
        dataIndex: "ddd",
        hideInForm: true,
        customRender({ text, record, index, column }) {
          return <Button onClick={() => edit(record)}>编辑</Button>;
        },
      },
    ];

    const request = async (params: Record<string, any>) => {
      console.log("参数：", params);

      return {
        total: 11,
        current: 1,
        pageSize: 10,
        result: [
          {
            id: 1,
            name: "张三",
            phone: "13800000000",
            avatar: "https://picsum.photos/200/300",
            createTime: new Date().getTime(),
          },
          {
            id: 2,
            name: "李四",
            phone: "13800000000",
            avatar: "https://picsum.photos/200/300",
            createTime: new Date().getTime(),
          },
        ],
      };
    };

    const detailColumns: ProColumnsType<typeof currRecord.value> = [
      {
        title: "基本信息",
        children: [
          {
            title: "input",
            dataIndex: "input",
            type: "input",
          },
          {
            title: "select",
            dataIndex: "select",
            type: "select",
            options: [
              {
                label: "男sdfsdf",
                value: "1",
              },
              {
                label: "其他",
                options: [
                  {
                    label: "女sdfsf",
                    value: "2",
                  },
                ],
              },
            ],
          },
          {
            title: "radio",
            dataIndex: "radio",
            type: "radio",
            options: [
              {
                label: "男sdfsdf",
                value: "1",
              },
              {
                label: "女sdfsf",
                value: "2",
              },
            ],
          },
          {
            title: "checkbox",
            dataIndex: "checkbox",
            type: "checkbox",
            options: [
              {
                label: "男sdfsdf",
                value: "1",
              },
              {
                label: "女sdfsf",
                value: "2",
              },
            ],
          },
          {
            title: "time",
            dataIndex: "time",
            type: "time",
          },
          {
            title: "timerange",
            dataIndex: "timerange",
            type: "timerange",
          },
          {
            title: "date",
            dataIndex: "date",
            type: "date",
          },
          {
            title: "daterange",
            dataIndex: "daterange",
            type: "daterange",
          },
        ],
      },
      {
        title: "其他信息",
        children: [
          {
            title: "image",
            dataIndex: "image",
            type: "image",
          },
          {
            title: "file",
            dataIndex: "file",
            type: "file",
          },
          {
            title: "table",
            dataIndex: "table",
            type: "table",
            fieldProps: {
              columns: [
                {
                  title: "姓名",
                  dataIndex: "name",
                  type: "input",
                },
                {
                  title: "手机号",
                  dataIndex: "phone",
                  type: "input",
                },
              ],
            },
          },
          {
            title: "fieldRender",
            dataIndex: "fieldRender",
            fieldRender({ record }) {
              return <Input v-model:value={record.fieldRender} />;
            },
            textRender({ record }) {
              return <div>{record.fieldRender}</div>;
            },
          },
        ],
      },
    ];
    const detailRequest = (params: Record<string, any>) => {
      return {
        // id: 1,
        // name: "张三",
        // phone: "13800000000",
        // avatar: "https://picsum.photos/200/300",
        // createTime: new Date().getTime(),
      };
    };

    const finish = (fields) => {
      open.value = false;
      return Promise.resolve();
      // return Promise.reject();
    };

    return () => (
      <div>
        <div class="flex">
          <div class="w-1/2">
            <ProForm columns={detailColumns} initialValues={{}} />
          </div>
          <div class="w-1/2">
            <ProForm
              mode="read"
              columns={detailColumns}
              initialValues={{
                table: [
                  { name: "111", phone: "111" },
                  { name: "222", phone: "222" },
                ],
                input: "11",
                select: "2",
                radio: "1",
                checkbox: ["1", "2"],
                time: "00:03:03",
                timerange: ["05:05:05", "09:04:04"],
                date: "2025-09-24",
                daterange: ["2025-09-23", "2025-09-24"],
                fieldRender: "ffff",
              }}
            />
          </div>
        </div>
      </div>
    );
  },
});
